<template>
  <div class="SingerInfoB">
    <ul>
      <li v-for="(v, i) in AlbumList" :key="i">
        <div class="SingerInfoB_a">
          <router-link :to="`/albuminfo/${v.id}`"
            ><img :src="v.picUrl"
          /></router-link>
        </div>
        <div class="SingerInfoB_b">
          <router-link :to="`/albuminfo/${v.id}`">{{ v.name }}</router-link>
        </div>
        <div class="SingerInfoB_c">{{ timestampToTime(v.publishTime) }}</div>
      </li>
    </ul>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        :page-size="limit"
        layout="prev, pager, next"
        :total="num"
        @prev-click="prev"
        @next-click="next"
        @current-change="change"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      num: 0,
      limit: 12,
      offset: 0,
      AlbumList: {},
    };
  },
  methods: {
    getAlbumList() {
      axios
        .get(
          `http://127.0.0.1:3000/artist/album?id=${this.$route.params.id}&limit=${this.limit}&offset=${this.offset}`
        )
        .then((res) => {
          this.AlbumList = res.data.hotAlbums;
          this.num = res.data.artist.albumSize;
        });
    },
    timestampToTime(timestamp) {
      let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + ".";
      let M = date.getMonth() + 1 + ".";
      let D = date.getDate();
      return Y + M + D;
    },
    // 上一页
    prev() {
      this.offset -= 12;
      this.getAlbumList();
      // 锚点定位
      document.querySelector("body").scrollIntoView({
        block: "start", // 上边框与视窗顶部部平齐
      });
    },
    // 下一页
    next() {
      this.offset += 12;
      this.getAlbumList();
      // 锚点定位
      document.querySelector("body").scrollIntoView({
        block: "start", // 上边框与视窗顶部部平齐
      });
    },
    change(p) {
      this.offset = (p - 1) * 12;
      this.getAlbumList();
      // 锚点定位
      document.querySelector("body").scrollIntoView({
        block: "start", // 上边框与视窗顶部部平齐
      });
    },
  },
  created() {
    this.getAlbumList();
  },
};
</script>
<style scoped>
.SingerInfoB > ul {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.SingerInfoB > ul > li {
  padding-bottom: 30px;
  margin-left: 26.5666px;
}
.SingerInfoB > ul > li:nth-child(1){
  margin-left: 0px;
}
.SingerInfoB > ul > li:nth-child(4n+1){
  margin-left: 0px;
}
.SingerInfoB > ul > li > .SingerInfoB_a {
  width: 145px;
  height: 120px;
  background: url("../../../public/images/coverall.png") no-repeat -170px -850px;
}
.SingerInfoB > ul > li > .SingerInfoB_a > a > img {
  width: 120px;
  height: 120px;
}
.SingerInfoB > ul > li > .SingerInfoB_b {
  width: 120px;
  margin: 5px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.SingerInfoB > ul > li > .SingerInfoB_b > a {
  font-size: 14px;
}
.SingerInfoB > ul > li > .SingerInfoB_b > a:hover {
  text-decoration: underline;
}
.SingerInfoB > ul > li > .SingerInfoB_c {
  font-size: 12px;
  color: #666666;
}
.pagination {
  display: flex;
  justify-content: center;
}
</style>